<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="assets/ico/favicon.png" />
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png" />

<!-- bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />

<!-- jquery-ui(popup) -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<!-- 폰트 적용 -->
<link rel="stylesheet" type="text/css" href="assets/css/nanumfont.css" />

<!-- font-awesome 적용 -->
<link rel="stylesheet" href="assets/font-awesome-4.0.3/css/font-awesome.min.css" />

<!-- 반응형 웹을 지원하지 않을 경우 -->
<!-- <link rel="stylesheet" href="assets/css/non-responsive.css" /> -->

<!-- IE8 이하 버전 지원 -->
<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->

<!-- IE10 반응형 웹 버그 보완 -->
<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->

<title>알랴쥼</title>

<!-- custom css 적용 -->
<link rel="stylesheet" href="assets/css/index.css">
</head>


<body>
	<!--****************************************************** 
		[시간 설정 팝업창]
		시간 인풋 타입을 클릭하면 뜨는 시간 설정창
	*******************************************************-->
	<div class="popup-settime">
		<form method="post" action="#">
			<div class="row">
				<div class="col-md-6 col-sm-6 col-xs-6">
					<a class="plus_btn text-center" onclick="in_hour()"><i class="fa fa-plus"></i></a>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-6">
					<a class="plus_btn text-center" onclick="in_min()"><i class="fa fa-plus"></i></a>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-sm-6 col-xs-6 text-center">
					<input id="hour-setted" class="input_time text-center" type="number" min="-1" max="24" value=""/>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-6 text-center">
					<input id="min-setted" class="input_time text-center" type="number" min="-1" max="60" value="" />
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-sm-6 col-xs-6">
					<a class="minu_btn text-center" onclick="de_hour()"><i class="fa fa-minus"></i></a>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-6">
					<a class="minu_btn text-center" onclick="de_min()"><i class="fa fa-minus"></i></a>
				</div>
			</div>
			<hr />
			<a class="btn btn-primary btn-block coco" onclick="input_time()">완료</a>
		</form>
	</div>


	<!--****************************************************** 
		[내 위치 입력에 대한한 팝업박스]
		인덱스 페이지의 내 위치 버튼을 누르면 올라오는 팝업 박스
	*******************************************************-->
	<div class="popup-box">
		<div class="text-center">
			<p>현재 내 위치를</p>
			<p>검색창에 입력하시겠습니까?</p>
		</div>
		<hr/>
		<div class="row text-center">
			<botton class="pop1 btn btn-primary popup-sl col-md-6 col-sm-6 col-xs-6" onfocus='blur();'>출발지로</botton>
			<botton class="pop1 btn btn-primary popup-el col-md-6 col-sm-6 col-xs-6">도착지로</botton>
		</div>
	</div>
	<!-- 업데이트에 대한 팝업박스 끝....-->
	
	<!--****************************************************** 
		[상단 네비게이션 바]
	*******************************************************-->
	<div class="navbar navbar-fixed-top navbar_style" role="navigation">
		<div class="nav_content">
			<div class="menu_switch nav_menu_btn pull-left text-center">
				<a href="#" id="quick_menu_switch"><i id="menu_icon" class="fa fa-plus"></i></a>
			</div>
			<div id="logo" class="arryazum_logo">
			</div>
			<div id="sub_menu" class="hidden text-center sub_menu_outer">
				<div class="sub_menu_inner text-center pull-left">
					<a href="metro_route.jsp" class="nav-btn"><i class="fa fa-desktop"></i></a>
				</div>
				<div class="sub_menu_inner text-center pull-left">
					<a href="RoutLibrary.jsp" class="nav-btn"><i class="fa fa-flag"></i></a>
				</div>
				<div class="sub_menu_inner text-center pull-left">
					<a href="option.jsp" class="nav-btn"><i class="fa fa-cog"></i></a>
				</div>
			</div>
			<div class="project_info_btn nav_menu_btn pull-right text-center">
				<a href="#"><i class="fa fa-info"></i></a><!-- 우리 포트폴리오 페이지의 알랴줌 소개페이지로 이동 -->
			</div>
		</div>
	</div> <!-- <div class="quick_menu_box"> 끝 -->

	<div class="content">
		<form class="form-signin form_style" method="post" action="select_result.jsp">
			<input type="hidden" name="start" id="startgps">
			<input type="hidden" name="end" id="endgps">
			
			<!--****************************************************** 
				[검색창]
			*******************************************************-->
			<div class="input-group">
				<input name="start_location" id="sl" type="text" class="form-control input-top txt_box_style" placeholder="출발지">
				<span class="input-group-btn">
					<button class="input-search btn btn-default input-btn input-btn-top input-btn-style" type="button"><i class="fa fa-search"></i></button>
				</span>
			</div>
			<div class="input-group">
				<input name="end_location" id="el" type="text" class="form-control input-bottom txt_box_style" placeholder="도착지">
				<span class="input-group-btn">
					<button class="input-search btn btn-default input-btn input-btn-middle input-btn-style" type="button"><i class="fa fa-search"></i></button>
				</span>
			</div>
			<div id="set-time" class="input-group set-time time_box">
			</div>
			
			<!--****************************************************** 
				[버튼그룹]
			*******************************************************-->
			<div class="btns_box">
				<button id="my_pos" class="btn btn-default btn-helper" type="button"><i class="fa fa-crosshairs"></i></button>
				<button class="btn btn-default btn-helper" type="button" onclick="location.href='BookMark.jsp';"><i class="fa fa-map-marker"></i></button>
				<button id="search-route-btn" class="btn btn-warning pull-right" type="submit">경로 검색</button>
			</div>
		</form>
	</div> <!-- <div class="content col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> 끝 -->
		
		
		
		<div id="test"></div>


	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/string.js"></script>
	<script src="assets/js/index.js"></script>
	<script id="android"></script>
	<script src="assets/js/db.js"></script>
	<script type="text/javascript">
		var alarmDB = {};
		alarmDB.webdb = {};
		alarmDB.webdb.db = null;
	      
		alarmDB.webdb.open = function() {
			var dbSize = 1 * 1024 * 1024; // 5MB
			alarmDB.webdb.db = openDatabase("alarmDB", "1.0", "알람DB", dbSize);
		};
	      
		alarmDB.webdb.createTable = function() {
			var db = alarmDB.webdb.db;
			db.transaction(function(tx) {
					tx.executeSql("CREATE TABLE IF NOT EXISTS alarmDB(key TEXT, value TEXT)", []);
			});
		};
	      
		alarmDB.webdb.addalarm = function(key, value) {
			var db = alarmDB.webdb.db;
			db.transaction(function(tx){
				tx.executeSql("INSERT INTO alarmDB(key, value) VALUES (?,?)",
						[key, value],
						alarmDB.webdb.onSuccess,
						alarmDB.webdb.onError);
			});
		};
	      
		alarmDB.webdb.onError = function(tx, e) {
			alert("There has been an error: " + e.message);
			};
	      
		alarmDB.webdb.onSuccess = function(tx, r) {
		};
	      
		alarmDB.webdb.getAllalarmItems = function(renderFunc) {
			var db = alarmDB.webdb.db;
			db.transaction(function(tx) {
				tx.executeSql("SELECT * FROM alarmDB", [], renderFunc,
						alarmDB.webdb.onError);
			});
		};
		
		function loadalarmList(tx, rs) {
			if (rs.rows.length <= 0) {
				alert("알람 초기화");
				alarmDB.webdb.addalarm("is_alarm", true);
				alarmDB.webdb.addalarm("set_time", 5);
				alarmDB.webdb.addalarm("set_dis", 30);
				alarmDB.webdb.addalarm("set_dis2", 250);
			}
		}
	
		var e_focus = 0;
		
		
		function in_hour() {
			$('#hour-setted').val(Number($('#hour-setted').val()) + 1);
			if($('#hour-setted').val() == 24) {
				$('#hour-setted').val(0);
			}
			if($('#hour-setted').val() == -1) {
				$('#hour-setted').val(23);
			}
		}
		
		function de_hour() {
			$('#hour-setted').val(Number($('#hour-setted').val()) - 1);
			if($('#hour-setted').val() == 24) {
				$('#hour-setted').val(0);
			}
			if($('#hour-setted').val() == -1) {
				$('#hour-setted').val(23);
			}
		}
		
		function in_min() {
			$('#min-setted').val(Number($('#min-setted').val()) + 1);
			if($('#min-setted').val() == 60) {
				$('#min-setted').val(0);
			}
			if($('#min-setted').val() == -1) {
				$('#min-setted').val(59);
			}
		}
		
		function de_min() {
			$('#min-setted').val(Number($('#min-setted').val()) - 1);
			if($('#min-setted').val() == 60) {
				$('#min-setted').val(0);
			}
			if($('#min-setted').val() == -1) {
				$('#min-setted').val(59);
			}
		}
		
		function input_time() {
			var tt = $('#input_time').val();
			var ht = $('#hour-setted').val();
			var mt = $('#min-setted').val();
			
			if(ht < 10) {
				ht = '0'+ Number(ht);
			}
			if(mt < 10) {
				mt = '0'+ Number(mt);
			}
			
			tt = ht + ':' + mt;
			
			$('#input_time').val(tt);
			
			$('.popup-settime').dialog("close");
		}
		
		var userBrowser = navigator.userAgent.toLowerCase();

		if (userBrowser.indexOf("android") != -1){
			$('#android').attr("src", "assets/js/cordova.js");
			
			document.addEventListener("deviceready", onDeviceReady, false);
			
			function onDeviceReady() {
				alarmDB.webdb.open();
				alarmDB.webdb.createTable();
				alarmDB.webdb.getAllalarmItems(loadalarmList);
				init();
			}
		} else {
			alarmDB.webdb.open();
			alarmDB.webdb.createTable();
			alarmDB.webdb.getAllalarmItems(loadalarmList);
			init();
		}
	
		$(function() {
			setime();
			
			$('form').submit(function() {
				sessionStorage["time"] = $('#input_time').val();
				sessionStorage["sg"] = $('#startgps').val();
				sessionStorage["eg"] = $('#endgps').val();
			});
			
			$('button').click(function() {
				if($('#sl').val().isValue()) {
					if (sessionStorage["sl"] != $('#sl').val()){
						sessionStorage["sl"] = $('#sl').val();
						sessionStorage["sg"] = '';
						$('#sl').val(sessionStorage["sl"]);
						$('#startgps').val(sessionStorage["sg"]);
					}
				}
				
				if($('#el').val().isValue()) {
					if (sessionStorage["el"] != $('#el').val()){
						sessionStorage["el"] = $('#el').val();
						sessionStorage["eg"] = '';
						$('#el').val(sessionStorage["el"]);
						$('#endgps').val(sessionStorage["eg"]);
					}
				}
			});
			
			$('#sl').val(sessionStorage["sl"]);
			$('#el').val(sessionStorage["el"]);
			
			if (sessionStorage["sg"] != null) {
				if (sessionStorage["sg"].split(".").length < 3) {
					var sg = sessionStorage["sg"].split(",");
					$.ajax({
						url : "http://apis.daum.net/local/geo/transcoord",
						dataType : "jsonp",
						data : {
							"apikey" : "0742d1ea1eab6220018c3f9716569897d5ec4ff5",
							"x" : sg[0],
							"y" : sg[1],
							"fromCoord" : "KTM",
							"toCoord" : "WGS84",
							"output" : "json"
						},
						timeout : 30000,
						cache : false,
						success : function(req) {
							$('#startgps').val(req.y + ',' + req.x);
						},
						error : function(xhr, status, error) {
							alert("status: " + status + " / error-code: " + xhr.status + " " + error);
						}
					});
				}
			}
			
			if (sessionStorage["eg"] != null) {
				if (sessionStorage["eg"].split(".").length < 3) {
					var sg = sessionStorage["eg"].split(",");
					$.ajax({
						url : "http://apis.daum.net/local/geo/transcoord",
						dataType : "jsonp",
						data : {
							"apikey" : "0742d1ea1eab6220018c3f9716569897d5ec4ff5",
							"x" : sg[0],
							"y" : sg[1],
							"fromCoord" : "KTM",
							"toCoord" : "WGS84",
							"output" : "json"
						},
						timeout : 30000,
						cache : false,
						success : function(req) {
							$('#endgps').val(req.y + ',' + req.x);
						},
						error : function(xhr, status, error) {
							alert("status: " + status + " / error-code: " + xhr.status + " " + error);
						}
					});
				}
			}
			
			$("input[type='text']").focus(function() {
				$("#quick_menu").hide();
			});
			
			$("input[type='text']").blur(function() {
				$("#quick_menu").show();
			});
			
			$('#my_pos').click(function() {
				$('.popup-box:eq(0)').dialog("open");
				$('.ui-dialog-titlebar-close').blur();
				$('.ui-dialog-titlebar-close').html('<i class="fa fa-times close-pop"></i>');
				$('.ui-dialog-title').html('내 위치');
				
				$('.popup-sl').click(function() {
					if(navigator.geolocation) {
						//브라우저에서 웹 지오로케이션 지원 여부 판단
						e_focus = 0;
						
						var options = { timeout: 30000, enableHighAccuracy: true };
						navigator.geolocation.getCurrentPosition(MyPosition,errorCallback,options);
					}
					$(this).parents('.popup-box').dialog("close");
					return false;
				});
				
				$('.popup-el').click(function() {
					if(navigator.geolocation) {
						//브라우저에서 웹 지오로케이션 지원 여부 판단
						e_focus = 1;
						navigator.geolocation.getCurrentPosition(MyPosition,errorCallback);
					}
					$(this).parents('.popup-box').dialog("close");
					return false;
				});
				
				$('.popup-close').click(function() {
					$(this).parents('.popup-box').dialog("close");
					return false;
				});
				
				$('.ui-widget-overlay').click(function() {
					$('.popup-box:eq(0)').dialog("close");
				});
			});
			

			
			//시간 셋팅 팝업 호출
			$('#input_time').click(function() {
				var time = new Date();
				var hh = time.getHours();
				var mm = time.getMinutes();
				
				if(hh<10) {
					hh = '0'+hh;
				}
				if(mm<10) {
					mm = '0'+mm;
				}
				
				$('#hour-setted').val(hh);
				$('#min-setted').val(mm);
				
				
				$('#hour-setted').change(function() {
					if($('#hour-setted').val() == 24) {
						$('#hour-setted').val(0);
					}
					if($('#hour-setted').val() == -1) {
						$('#hour-setted').val(23);
					}
					if($('#hour-setted').val() < 10) {
						$('#hour-setted').val('0' + Number($('#hour-setted').val()));
					}
				});
				
				$('#min-setted').change(function() {
					if($('#min-setted').val() == 60) {
						$('#min-setted').val(0);
					}
					if($('#min-setted').val() == -1) {
						$('#min-setted').val(59);
					}
					if($('#min-setted').val() < 10) {
						$('#min-setted').val('0' + Number($('#min-setted').val()));
					}
				});
				
				$('.popup-settime').dialog("open");
				$('.ui-dialog-titlebar-close').html('<i class="fa fa-times close-pop"></i>');
				$('.ui-dialog-title').html('출발시간설정');
				$('.ui-dialog-titlebar-close').blur();
				$('#hour-setted').blur();
				$('#min-setted').blur();
				
				$('.ui-widget-overlay').click(function() {
					$('.popup-settime').dialog("close");
				});
				
				$(this).blur();
			});
			
			
			
			$('.input-btn-bottom').click(function() {
				var time = new Date();
				var refresh = '';
				
				if (time.getHours() < 10) {
					refresh += '0';
				}
				
				refresh += time.getHours();
				refresh += ':';
				
				if (time.getMinutes() < 10) {
					refresh += '0';
				}
				
				refresh += time.getMinutes();
				
				$('.time').val(refresh);
			});
			
			$(document).on(
				'click',
				'input[type="time"]',
				function() {
					alert('시계');
					return false;
			});
		});
		
		function setime() {
			var time = new Date();
			var settime = '';
			settime += '<input id="input_time" data-format="hh:mm" type="text" name="time" class="form-control time txt_box_style" value="';
			if (time.getHours() < 10) {
				settime += '0';
			}
			settime += time.getHours();
			settime += ':';
			if (time.getMinutes() < 10) {
				settime += '0';
			}
			settime += time.getMinutes();
			settime += '">';
			settime += '<span class="input-group-btn">';
			settime += '<button class="btn btn-default input-btn input-btn-bottom input-btn-style" type="button">';
			settime += '<i class="fa fa-refresh"></i>';
			settime += '</button>';
			settime += '</span>';
			$('.set-time').html(settime);
		}
		
		function MyPosition(position){
			var lat= position.coords.latitude;
			var lng = position.coords.longitude;
			var fullname = '';
			
			$.ajax({
				url : "http://apis.daum.net/local/geo/coord2addr",
				data : {
					"apikey" : "0742d1ea1eab6220018c3f9716569897d5ec4ff5",
					"longitude" : lng,
					"latitude" : lat,
					"output" : "json",
					"inputCoordSystem" : "WGS84"
				},
				dataType : "jsonp",
				timeout : 30000,
				cache : false,
				success : function(req) {
					// --> var seq = { "message" : "Hello Json" }
					fullname = req.fullName;
					if (e_focus == 1) {
						$('#el').val(fullname);
						$('#endgps').val(lat + "," + lng);
					} else {
						$('#sl').val(fullname);
						$('#startgps').val(lat + "," + lng);
					}
				},
				error : function(xhr, status, error) {
					alert("status: " + status + " / error-code: " + xhr.status + " " + error);
				}
			});
		}
		
		function errorCallback(error) {
			alert(error.message);
		}
	</script>
	
	<script type="text/javascript">
	// 크롬 브라우져 외에 크기 조절
	var userBrowser = navigator.userAgent.toLowerCase();
	 //브라우져가 크롬이면
	  if (userBrowser.indexOf("chrome") != -1){ 
		
	  }
	 
	 //기타 브라우져 
	  else {
		$(".input_time").css("width", "123px");
	  }
	</script>
</body>
</html>

